<template>
	<view class="content">
		<view class="faq-detail">
			<view class="top">
				<text class="iconfont icon-wenti"></text>
				<text class="title">{{ helpItem.title }}</text>
			</view>
			<view class="faq-content" v-html="helpItem.content"></view>
		</view>

		<!--底部按钮-->
		<view class="footer-bar"><view class="call-service" @tap="$Router.push('/pages/member/service')">联系客服</view></view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
export default {
	name: 'helpDetail',
	data() {
		return {
			helpItem: {}
		};
	},
	onLoad() {
		this.helpItem = uni.getStorageSync('helpItem');
		
		this.helpItem.content = this.formatRichText(this.helpItem.content)
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		formatRichText(html) {
			let newContent = html.replace(/<p>(.*?)<\/p>/g, '<view class="text">$1</view>');
			
			newContent = newContent.replace(/<img>(.*?)<\/img>/g, '<image mode="widthFix" class="image">$1</image>');
			return newContent;
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f6f7fa;
	font-size: 28rpx;
	width: 100%;
	.faq-detail {
		background: #fff;
		padding: 40rpx;
		width: 100%;
		margin-top: 20rpx;
		padding-bottom: 104rpx;
		.top {
			@include flexBox(null, center);
			.iconfont {
				color: $main-color;
				font-size: 40rpx;
				margin-right: 20rpx;
			}
			.title {
			}
		}
		.faq-content {
			margin-top: 40rpx;
			text-indent: 2em;
			width: 100%;
			word-break: break-all;
		}
	}
	.footer-bar {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 20rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.16);
		@include flexBox(center, center);
		.call-service {
			width: 336rpx;
			line-height: 80rpx;
			background: $main-color;
			color: #fff;
			border-radius: 50rpx;
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
}
</style>
